<script>
import {login, signOut, viewPersonalInformation} from "@/api/http";

export default {
  name: "headerYun",
  data() {
    return {
      visible: false,
      formInline: {
        username: '',
        password: '',
        // rememberMe:true
      },
      //   是否登录
      isLogin: false,
      //   个人信息
      userInfo: {}
    }
  },
  methods: {
    handleSubmit() {
      console.log(this.formInline);
      // login(this.formInline).then(res=>{
      login({...this.formInline, rememberMe: true}).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.visible = false;
          this.isLogin = true;
          this.userInfo = res.userInfo
          this.$message.success('登录成功');
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    // 对话框
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    //   退出登录
    logOut() {
      signOut().then(res => {
        console.log(res)
        if (res.code === 0) {
          this.isLogin = false;
          this.$message.success('退出登录成功');
        }
      })
    },
    //   查看个人信息
    viewInfo(){
      viewPersonalInformation().then(res=>{
        console.log(res,'查看个人信息')
        if(res.code===0) {
          this.userInfo=res.data
          this.isLogin = true;
        }else {
          this.isLogin = false;
        }
      })
    }
  },
  created() {
    this.viewInfo()
  }
}
</script>

<template>
  <div>
    云课堂头部
    <a-button type="primary" @click="showModal" v-if="!isLogin">
      登录/注册
    </a-button>
    <a-dropdown v-else>
      <a class="ant-dropdown-link" @click="e => e.preventDefault()">
        <a-avatar :src="userInfo.avatarUrl"/>
        {{ userInfo.nickname }}
      </a>
      <a-menu slot="overlay">
        <a-menu-item>
          <router-link to="/person">个人中心</router-link>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">我的订单</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;" @click="logOut">退出登录</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <a-modal v-model="visible" @ok="handleOk" :footer="null" width="350px">
      <a-form-model layout="horizontal" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
        <a-form-model-item>
          <a-input v-model="formInline.username" placeholder="Username">
            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-input v-model="formInline.password" type="password" placeholder="Password">
            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button
              type="primary"
              html-type="submit"
          >
            登录
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<style scoped lang="less">
/deep/ .ant-modal-body {
  padding: 40px 40px 10px;
}

</style>